import React, { PureComponent } from 'react'
import { Routes, Route, BrowserRouter, NavLink, Link, useLocation, useNavigate, useParams, replace, useRoutes } from 'react-router-dom'
import Home from './home'
import About from './about'
import Profile from './profile'
import ProfileSearch from './profile-search'
import Login from './login'

import routes from '../router'

// 渲染路由
function RouteElement(){
  const element = useRoutes(routes)
  return element
}

class ParamsSend extends PureComponent {
  navSkip = () => {
    this.props.navigate('/login')
  }
  paramsSend = () => {
    this.props.navigate(`/profile?name=tom&age=18`)
    // 通过useSearchParams获取search参数   searchParams.get('name')  获取值
  }
  render() {
    const id = 1
    return (
      <div>
        {/* <BrowserRouter> */}
          <NavLink to="/" className={({isActive}) => isActive ? 'link_item_active link_item' : 'link_item'}>首页</NavLink>
          <NavLink to="/about" className={({isActive}) => isActive ? 'link_item_active link_item' : 'link_item'}>关于</NavLink>
          {/* 动态路由传递参数 */}
          <NavLink to="/user/abc" className={({isActive}) => isActive ? 'link_item_active link_item' : 'link_item'}>abc</NavLink>
          {/* <NavLink to="/user/123" className={({isActive}) => isActive ? 'link_item_active link_item' : 'link_item'}>123</NavLink> */}
          <button onClick={this.navSkip}>登录</button>
          {/* search 传递参数 */}
          <button onClick={this.paramsSend}>参数传递-search(query)</button>
          {/* link的to--字符串传递 */}
          <NavLink to={`/user/${id}`} className={({isActive}) => isActive ? 'link_item_active link_item' : 'link_item'}>个人信息</NavLink>
          {/* <NavLink to={`/user?name=tom&age=18`} className={({isActive}) => isActive ? 'link_item_active link_item' : 'link_item'}>个人信息2</NavLink> */}
          {/* link的to--object传递 */}
          {/* <Link to='/user' state = {{ from: '/profile' }} end='true'>个人信息3</Link> */}
          <NavLink to={{
            pathname: '/profile',
            search: '?name=tom&age=18',
          }} state = {{ from: '/profile' }} className={({isActive}) => isActive ? 'link_item_active link_item' : 'link_item'}>个人信息4</NavLink>
          {/* <Routes>
            定义路径与页面的映射关系
            <Route path='/' element={<Home />}></Route>
            <Route path='/*' element={<About />}></Route>
            <Route path='/user/:id' element={<Profile />}></Route>
            <Route path='/user' element={<ProfileSearch />}></Route>
            <Route path='/login' element={<Login />}></Route>
          </Routes> */}
          <RouteElement></RouteElement>

        {/* </BrowserRouter> */}
      </div>
    )
  }
}


function withRouter( Child ) {
  return ( props ) => {
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();
    return <Child { ...props } match={{params}} navigate={ navigate } location={ location } />
  }
}

export default withRouter(ParamsSend)
